<template>
  <el-form :model="formData" label-width="80px">
    <el-row type="flex">
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.subjectID"
            placeholder="请选择"
            @change="subjectSelect"
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.catalogID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in directorys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.tags"
            placeholder="请选择"
          >
            <el-option
              v-for="item in tags"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input
            size="small"
            style="width: 100%"
            v-model="formData.keyword"
            placeholder="根据题干搜索内容"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.questionType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.difficulty"
            placeholder="请选择"
          >
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.direction"
            placeholder="请选择"
          >
            <el-option
              v-for="item in direction"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select
            size="small"
            style="width: 100%"
            v-model="formData.creatorID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input
            size="small"
            v-model="formData.remarks"
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input
            size="small"
            v-model="formData.shortName"
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="城市" style="width: 100%">
          <QuestionCascader
            ref="cityCascader"
            :city.sync="formData.city"
            :province.sync="formData.province"
            />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item style="margin-top:2px;">
          <el-row type="flex" justify="end">
            <el-button size="small" @click="clearSearch">清除</el-button>
            <el-button size="small" type="primary" @click="searchQuestion"
              >搜索</el-button
            >
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { simple as getSubjects } from '@/api/hmmm/subjects'
import { simple as getDirectorys } from '@/api/hmmm/directorys'
import { simple as getTags } from '@/api/hmmm/tags'
import { simple as getUsers } from '@/api/base/users'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'

export default {
  data () {
    return {
      difficulty,
      questionType,
      direction,
      subjects: [],
      directorys: [],
      tags: [],
      users: [],
      formData: {
        subjectID: '',
        catalogID: '',
        tags: '',
        direction: '',
        difficulty: null,
        questionType: null,
        province: '',
        city: '',
        keyword: '',
        creatorID: '',
        remarks: '',
        shortName: ''
      },
      value: '',
      input: ''
    }
  },
  created () {
    this.getSubjectList()
    this.getUsers()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const { data } = await getSubjects()
      this.subjects = data
    },
    // 学科选择后请求目录和标签
    async subjectSelect (subjectID) {
      const { data } = await getDirectorys({ subjectID })
      this.directorys = data
      const { data: data1 } = await getTags({ subjectID })
      this.tags = data1
    },
    // 获取录入人列表
    async getUsers () {
      const { data } = await getUsers()
      this.users = data
    },
    // 搜索按钮
    async searchQuestion () {
      const oldObj = this.formData
      const searchObj = {}
      for (const key in oldObj) {
        if (oldObj[key] !== '' && oldObj[key] !== null) {
          searchObj[key] = oldObj[key]
        }
      }
      this.$emit('searchQuestion', searchObj)
    },
    // 清除搜索
    clearSearch () {
      this.formData = {
        subjectID: '',
        catalogID: '',
        tags: '',
        direction: '',
        difficulty: null,
        questionType: null,
        province: '',
        city: '',
        keyword: '',
        creatorID: '',
        remarks: '',
        shortName: ''
      }
      this.$refs.cityCascader.clearCity()
      this.$emit('clearSearch')
    }
  }
}
</script>

<style></style>
